<template>
  <div id="app" style="font-size: 26px; font-weght: bold; margin: 30px 0">
    <header class="header">
      <div class="everyBox">
        <div v-for="(item, index) in topInputList" :key="index">
          <span class="span">{{ item.title }}</span>
          <el-input
            v-if="item.type == 'input'"
            v-model="item.text"
            :placeholder="item.title"
            class="top-input"
          ></el-input>
          <el-select
            v-if="item.type == 'select'"
            v-model="item.text"
            placeholder="请选择"
            class="slelctBox"
          >
            <el-option
              v-for="item2 in item.options"
              :key="item2.value"
              :label="item2.label"
              :value="item2.value"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
        <div>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
      </div>
    </header>
    <div class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
      >
        <el-table-column show-overflow-tooltip prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="type_text"
          label="发票类型"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="name" label="发票抬头">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="duty" label="发票税号">
          <template slot-scope="scope">
            <span>{{ scope.row.duty == "null " ? "" : scope.row.duty }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="price" label="发票金额">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status_text"
          label="开票状态"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="email" label="邮箱">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="ctime" label="创建时间">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="date"
          label="操作"
          width="130"
        >
          <template slot-scope="scope">
            <el-button @click="bianji(scope.row)" size="mini">{{
              "查看"
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50, 60]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :rules="rules"
        :inline="true"
        :model="form"
        label-width="110px"
      >
        <el-form-item label="ID：" style="width: 40%">
          <span>{{ form.id }}</span>
        </el-form-item>
        <el-form-item label="资源ID：" style="width: 40%">
          <span v-for="(item, index) in form.order" :key="index"
            >{{ item.order_id }} <span> &nbsp;</span>
          </span>
        </el-form-item>
        <el-form-item label="发票类型：" style="width: 40%">
          <!-- <el-select
            v-model="form.type"
            placeholder="发票类型"
            class="input"
            v-if="saveBtn"
            :disabled="disabled"
          >
            <el-option label="个人发票" value="1"></el-option>
            <el-option label="企业发票" value="2"></el-option>
          </el-select> -->
          <div>
            {{ form.type == 1 ? "个人发票" : "企业发票" }}
          </div>
        </el-form-item>
        <el-form-item label="发票抬头：" style="width: 40%">
          <!-- <el-input
            v-model="form.name"
            class="input"
            v-if="saveBtn"
            :disabled="disabled"
          ></el-input> -->
          <div>
            {{ form.name }}
          </div>
        </el-form-item>
        <el-form-item label="发票金额：" style="width: 40%">
          <!-- <el-input
            :disabled="disabled"
            v-model="form.price"
            class="input"
            v-if="saveBtn"
          ></el-input> -->
          <div>
            {{ form.price }}
          </div>
        </el-form-item>
        <el-form-item label="发票税号：" style="width: 40%">
          <!-- <el-input
            v-model="form.duty"
            class="input"
            v-if="saveBtn"
            :disabled="disabled"
          ></el-input> -->
          <div>
            {{ form.duty == "null " ? "" : form.duty }}
          </div>
        </el-form-item>
        <el-form-item label="开票状态：" style="width: 40%">
          <!-- <el-select
            v-model="form.status"
            placeholder="开票状态"
            class="input"
            v-if="saveBtn"
          >
            <el-option label="未开票" value="2"></el-option>
            <el-option label="已开票" value="1"></el-option>
          </el-select> -->
          <div>
            {{ form.status == 1 ? "已开票" : "未开票" }}
          </div>
        </el-form-item>
        <el-form-item style="width: 40%">
          <el-button size="small" @click="toHandle">查看订单</el-button>
        </el-form-item>
        <el-form-item
          v-if="form.type == 2"
          label="企业地址："
          style="width: 40%"
        >
          <div>
            {{ form.address }}
          </div>
        </el-form-item>
        <el-form-item
          v-if="form.type == 2"
          label="企业电话："
          style="width: 40%"
        >
          <div>
            {{ form.enterprise_phone }}
          </div>
        </el-form-item>
        <el-form-item
          v-if="form.type == 2"
          label="开户行名称："
          style="width: 40%"
        >
          <div>
            {{ form.row_name }}
          </div>
        </el-form-item>
        <el-form-item
          v-if="form.type == 2"
          label="开户行账号："
          style="width: 40%"
        >
          <div>
            {{ form.account }}
          </div>
        </el-form-item>
        <el-form-item label="开票人手机号：" style="width: 40%">
          <div>
            {{ form.phone }}
          </div>
        </el-form-item>
        <el-form-item label="开票人邮箱：" style="width: 40%">
          <div>
            {{ form.email }}
          </div>
        </el-form-item>
        <el-form-item
          label="是否开发票："
          style="width: 40%"
          v-if="form.status == 2"
          prop="statusSelect"
        >
          <el-select
            v-model="form.statusSelect"
            placeholder="请选择"
            class="input"
          >
            <el-option label="否" value="2"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer" v-if="saveBtn">
        <el-button type="primary" @click="dialogOk">确 定</el-button>
        <el-button @click="cancle">取 消</el-button>
      </span>
      <el-dialog
        title="查看订单详情"
        :visible.sync="OrderDetailDialog"
        width="50%"
        append-to-body
      >
        <waterOrder
          :waterOrderDetailId="waterOrderDetailId"
          :orderType="orderType"
        ></waterOrder>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { getInvoiceList } from "../../../utils/main";
import { saveInvoice } from "../../../utils/api";
import waterOrder from "../../common/waterOrderListDetail.vue";
export default {
  name: "invoice",
  components: {
    waterOrder,
  },
  data() {
    return {
      OrderDetailDialog: false,
      waterOrderDetailId: "",
      orderType: "",
      token: sessionStorage.getItem("token"),
      disabled: true,
      topInputList: [
        {
          title: "发票类型",
          text: "",
          type: "select",
          options: [
            // { value: "11", label: "请选择" },
            { value: "1", label: "个人发票" },
            { value: "2", label: "企业发票" },
          ],
        },
        { title: "发票抬头", text: "", type: "input" },
        { title: "发票税号", text: "", type: "input" },
        { title: "邮箱", text: "", type: "input" },
        {
          title: "开票状态",
          text: "",
          type: "select",
          options: [
            // { value: "11", label: "请选择" },
            { value: "2", label: "未开票" },
            { value: "1", label: "已开票" },
          ],
        },
      ],

      limit: 10,
      currentPage: 1,
      total: 0,
      tableData: [],
      loading: true,
      dialogVisible: false,
      dialogTitle: "发票编辑",
      form: {},
      saveBtn: true,
      //校验
      rules: {
        statusSelect: [
          { required: true, message: "请选择是否开发票", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    topInputList: {
      handler(val, o) {
        if (val[0].text == 11) {
          this.topInputList[0].text = "";
        }
        if (val[4].text == 11) {
          this.topInputList[4].text = "";
        }
      },
      deep: true,
    },
  },
  methods: {
    toHandle() {
      this.OrderDetailDialog = true;
    },
    cancle() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    dialogOk() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          saveInvoice(
            this.token,
            this.form.id,
            this.form.statusSelect,
            this.form.price,
            this.form.type,
            this.form.name,
            this.form.duty
          ).then((res) => {
            if (res.data.status) {
              this.$message({
                type: "success",
                message: "成功!",
              });
              this.dialogVisible = false;
              this.$refs.form.resetFields();
              this.invoiceList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    invoiceList() {
      this.loading = true;
      getInvoiceList(
        this.token,
        this.currentPage,
        this.limit,
        this.topInputList[0].text,
        this.topInputList[1].text,
        this.topInputList[2].text,
        this.topInputList[3].text,
        this.topInputList[4].text,
        12
      ).then((res) => {
        if (res.data.status) {
          this.tableData = res.data.data.data || [];
          this.total = res.data.data.count;
          this.tableData.forEach((item) => {
            if (item.type == 1) {
              item.type_text = "个人发票";
            }
            if (item.type == 2) {
              item.type_text = "企业发票";
            }
            if (item.status == 1) {
              item.status_text = "已开票";
            }
            if (item.status == 2) {
              item.status_text = "未开票";
            }
          });
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          this.$message.error(res.data.msg);
          this.loading = false;
        }
      });
    },
    bianji(row) {
      if (row.status == 1) {
        this.saveBtn = false;
      }
      if (row.status == 2) {
        this.saveBtn = true;
      }
      this.dialogVisible = true;
      let obj = JSON.parse(JSON.stringify(row));
      this.form = obj;
      this.waterOrderDetailId = this.form.order[0].order_id;
      this.orderType = this.form.order[0].order_type;
    },
    search() {
      (this.currentPage = 1), this.invoiceList();
    },
    reset() {
      (this.currentPage = 1),
        (this.topInputList[4].text = ""),
        (this.topInputList[0].text = ""),
        (this.topInputList[3].text = ""),
        (this.topInputList[2].text = ""),
        (this.topInputList[1].text = "");
      this.invoiceList();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.invoiceList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.invoiceList();
    },
  },
  created() {
    this.invoiceList();
  },
};
</script>

<style scoped>
.body {
  margin: 20px 0;
}
#app {
  width: 100%;
}
/deep/.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
}
.slelctBox {
  margin: 0 15px 0 0;
}
.top-input {
  width: 150px;
  margin-right: 20px;
}
.header .span {
  font-size: initial;
}
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
}
/deep/.el-table .cell.el-tooltip {
  text-align: center;
}
/deep/.el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
.input {
  width: 200px;
}
.everyBox {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.everyBox div {
  margin-right: 10px;
}
.header .span {
  font-size: initial;
}
</style>
